<div class="player">
  <div class="back-metadata">
    <button mat-button mat-icon-button class="back" (click)="previous.emit()">
      <mat-icon>arrow_back</mat-icon>
    </button>
    <div class="metadata">
      <span class="title" [matTooltip]="currentTrack ? currentTrack.title : ''">
        {{ currentTrack ? currentTrack.title : '' }}
      </span>
      <span class="artist" [matTooltip]="currentTrack ? currentTrack.artist : ''">
        {{ currentTrack ? currentTrack.artist : '' }}
      </span>
    </div>
    <button mat-button mat-icon-button
            class="mute"
            (click)="setMuted(!muted)"
            [disabled]="viewLoading">
      <mat-icon *ngIf="!muted && volume > 0.50">volume_up</mat-icon>
      <mat-icon *ngIf="!muted && volume > 0 && volume <= 0.50">volume_down</mat-icon>
      <mat-icon *ngIf="!muted && volume == 0">volume_mute</mat-icon>
      <mat-icon *ngIf="muted">volume_off</mat-icon>
    </button>
  </div>
  <div class="volume">
    <mat-slider
      [disabled]="muted || viewLoading"
      [value]="volume"
      (input)="setVolume($event.value)"
      [max]="1"
      [step]="0.01"
      color="primary"></mat-slider>
    <button mat-button mat-icon-button
            class="mute"
            (click)="setMuted(!muted)">
      <mat-icon *ngIf="!muted && volume > 0.50">volume_up</mat-icon>
      <mat-icon *ngIf="!muted && volume > 0 && volume <= 0.50">volume_down</mat-icon>
      <mat-icon *ngIf="!muted && volume == 0">volume_mute</mat-icon>
      <mat-icon *ngIf="muted">volume_off</mat-icon>
    </button>
  </div>
  <div class="carousel">
    <mat-tab-group #carousel [(selectedIndex)]="selectedCarouselIndex">
      <mat-tab label="Playlist">
        <ng-template mat-tab-label>
          <mat-icon>playlist_play</mat-icon>
          <span>Playlist</span>
        </ng-template>
        <app-loader [show]="viewLoading"></app-loader>
        <mat-list *ngIf="smallScreen && !viewLoading" class="playlist" (swipeleft)="swipeLeft()" (swiperight)="swipeRight()" #playlistMatList>
          <ng-container *ngFor="let track of playlist; trackBy: trackByURL">
            <div #listItem [attr.data-url]="track.url" class="track-list-item divider">
              <mat-list-item class="hover"
                             [class.current]="isTrackCurrent(track)"
                             (click)="playTrack(track)">
                <span matLine class="title">
                  <mat-icon *ngIf="isTrackCurrent(track) && playing">equalizer</mat-icon>
                  <span>{{ track.title }}</span>
                </span>
                <span matLine class="meta">
                  {{ track.artist }} • {{ track.album }}
                </span>
                <!--<span class="year">{{ track.year }}</span>-->
                <span class="duration">{{ track.duration | sgTime }}</span>
              </mat-list-item>
            </div>
          </ng-container>
        </mat-list>
        <ul *ngIf="!smallScreen && !viewLoading" class="playlist-long" (swipeleft)="swipeLeft()" (swiperight)="swipeRight()" #playlistUl>
          <ng-container *ngFor="let track of playlist; trackBy: trackByURL">
            <li #listItem [class.current]="isTrackCurrent(track)" class="divider track-list-item" (click)="playTrack(track)" [attr.data-url]="track.url">
              <span class="title c">
                <mat-icon *ngIf="isTrackCurrent(track) && playing">equalizer</mat-icon>
                <span [matTooltip]="track.title">{{ track.title }}</span>
              </span>
              <span class="artist c" [matTooltip]="track.artist">{{ track.artist }}</span>
              <span class="album c" [matTooltip]="track.album">{{ track.album }}</span>
              <span class="year c">{{ track.year | sgYear }}</span>
              <span class="duration c">{{ track.duration | sgTime }}</span>
            </li>
          </ng-container>
          <li class="status-bar">
            <span class="status-total-time">Total duration: {{ getTotalDuration() | sgTime }}</span>
          </li>
        </ul>
      </mat-tab>
      <mat-tab label="Cover">
        <ng-template mat-tab-label>
          <mat-icon>photo</mat-icon>
          <span>Cover</span>
        </ng-template>
        <div class="albumArt" (swipeleft)="swipeLeft()" (swiperight)="swipeRight()">
          <img *ngIf="currentTrack && currentTrack.coverUrl" src="{{ currentTrack.coverUrl }}" alt="Album Cover" />
          <mat-icon *ngIf="!currentTrack || !currentTrack.coverUrl">music_note</mat-icon>
        </div>
      </mat-tab>
      <mat-tab label="Lyrics" >
        <ng-template mat-tab-label>
          <mat-icon>format_align_center</mat-icon>
          <span>Lyrics</span>
        </ng-template>
        <div class="lyrics"
             #lyricsDiv
             *ngIf="lyrics !== null || showError == false"
             (swipeleft)="swipeLeft()"
             (swiperight)="swipeRight()"
             [attr.contenteditable]="!smallScreen"
             spellcheck="false"
             (blur)="lyricsEdited($event)"
             (paste)="lyricsPasted($event)"
             (keydown)="onKeyDown($event)">{{ lyrics }}</div>
        <div class="lyrics error"
             *ngIf="lyricsError && showError"
             (click)="errorClicked()"
             (swipeleft)="swipeLeft()"
             (swiperight)="swipeRight()">
          {{ lyricsError }}<br>
          <span *ngIf="!smallScreen">You can copy/paste some lyrics here.</span>
        </div>
        <div class="lyrics loading" *ngIf="lyricsLoading">
          <mat-spinner diameter="30"></mat-spinner>
        </div>
      </mat-tab>
    </mat-tab-group>
  </div>
  <app-progress [loading]="loading$ | async"
                [currentTime]="currentTime$ | async"
                [duration]="duration$ | async"
                (seekTo)="seekTo($event)">
  </app-progress>
  <div class="menu">
    <button mat-button mat-icon-button
            class="shuffle"
            [color]="shuffle ? 'primary' : ''"
            [disabled]="viewLoading"
            (click)="setShuffle(!shuffle)">
      <mat-icon>shuffle</mat-icon>
    </button>
    <button mat-button mat-icon-button
            class="repeat"
            [color]="repeat ? 'primary' : ''"
            [disabled]="viewLoading"
            (click)="setRepeat(!repeat)">
      <mat-icon>repeat</mat-icon>
    </button>
    <button mat-button mat-icon-button
            class="previous"
            (click)="playPrevious()"
            [disabled]="!currentTrack || playlist.length <= 1">
      <mat-icon>skip_previous</mat-icon>
    </button>
    <button mat-button mat-icon-button
            class="playPause"
            [disabled]="playlist.length === 0 && !currentTrack"
            (click)="playing ? pause() : (currentTrack ? resume() : playNext())">
      <mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
    </button>
    <button mat-button mat-icon-button
            class="next"
            (click)="playNext()"
            [disabled]="!currentTrack || playlist.length <= 1">
      <mat-icon>skip_next</mat-icon>
    </button>
    <button mat-button mat-icon-button
            class="favorites"
            [disabled]="!currentTrack"
            [color]="(isFavorite(currentTrack) | async) ? 'warn' : ''"
            (click)="addOrRemoveFromFavorites(currentTrack)">
      <mat-icon>{{ (isFavorite(currentTrack) | async) ? 'favorite' : 'favorite_border' }}</mat-icon>
    </button>
    <button mat-button
            mat-icon-button
            [matMenuTriggerFor]="playerMenu"
            class="more"
            (click)="$event.stopPropagation()"
            [disabled]="viewLoading">
      <mat-icon>more_vert</mat-icon>
    </button>
  </div>
  <mat-menu #playerMenu="matMenu" [overlapTrigger]="false">
    <button mat-menu-item [disabled]="!currentTrack" (click)="addOrRemoveFromFavorites(currentTrack)">
      <mat-icon>{{ (isFavorite(currentTrack) | async) ? 'favorite' : 'favorite_border' }}</mat-icon>
      <span>{{ (isFavorite(currentTrack) | async) ? 'Remove from favorites' : 'Add to favorites' }}</span>
    </button>
    <button mat-menu-item [disabled]="!currentTrack" (click)="openDetailsDialog(currentTrack)">
      <mat-icon>details</mat-icon>
      <span>Details</span>
    </button>
    <mat-divider></mat-divider>
    <button mat-menu-item (click)="setShuffle(!shuffle)">
      <mat-icon>shuffle</mat-icon>
      <span>Shuffle</span>
    </button>
    <button mat-menu-item (click)="setRepeat(!repeat)">
      <mat-icon>repeat</mat-icon>
      <span>Repeat</span>
    </button>
    <mat-divider></mat-divider>
    <button mat-menu-item [matMenuTriggerFor]="LoadPlaylist" [disabled]="playlists.length === 0">
      <mat-icon>playlist_play</mat-icon>
      <span>Load playlist</span>
    </button>
    <button mat-menu-item [matMenuTriggerFor]="AddToPlaylist" [disabled]="playlists.length === 0">
      <mat-icon>playlist_add</mat-icon>
      <span>Add all to playlist</span>
    </button>
    <button mat-menu-item (click)="showInLibrary()" [disabled]="playlist.length == 0">
      <mat-icon>queue_music</mat-icon>
      <span>Select in library</span>
    </button>
    <button mat-menu-item (click)="clearPlaylist()" [disabled]="playlist.length == 0">
      <mat-icon>delete</mat-icon>
      <span>Clear playlist</span>
    </button>
    <button mat-menu-item (click)="savePlaylist()" [disabled]="playlist.length == 0">
      <mat-icon>save</mat-icon>
      <span>Save playlist</span>
    </button>
  </mat-menu>
  <mat-menu #LoadPlaylist="matMenu">
    <ng-container *ngFor="let pl of playlists">
      <button mat-menu-item (click)="loadPlaylist(pl)">
        <mat-icon>album</mat-icon>
        {{pl.name}}
      </button>
    </ng-container>
  </mat-menu>
  <mat-menu #AddToPlaylist="matMenu">
    <!--<button mat-menu-item disabled>-->
      <!--<mat-icon>add</mat-icon>-->
      <!--New playlist-->
    <!--</button>-->
    <!--<mat-divider></mat-divider>-->
    <ng-container *ngFor="let pl of playlists">
      <button mat-menu-item (click)="addAllToPlaylist(pl)">
        <mat-icon>album</mat-icon>
        {{pl.name}}
      </button>
    </ng-container>
  </mat-menu>
</div>
